<template>
  <div id="app">
    <div class="form" action="">
      <div>
        <span>受捐单位：</span>
        <select name="danwei" class="danweiCha" v-model="donateComporment">
          <option value="厚朴公司">厚朴公司</option>
          <option value="翻斗花园">翻斗花园</option>
        </select>
        <button @click="filtersComporment">查询</button>
        <button @click="resetList">恢复</button>
      </div>
      <div class="fromAdd">
        <div>
          <span>捐赠人:</span>
          <input
            v-model="uname"
            type="text"
            class="uname"
            name="uname"
            placeholder="姓名"
          />
        </div>
        <div>
          <span>受捐单位:</span>
          <select name="danwei" class="danwei" v-model="danwei">
            <option value="厚朴公司">厚朴公司</option>
            <option value="翻斗花园">翻斗花园</option>
          </select>
        </div>
        <div>
          <span>金额:</span>
          <input
            type="number"
            class="money"
            name="money"
            v-model="money"
            placeholder="金额"
          />
        </div>
        <div>
          <span>受捐日期:</span>
          <input type="date" class="date" name="date" v-model="date" />
        </div>

        <button id="add" type="button" @click="addDonateList">新增</button>
      </div>
    </div>
    <div class="num">
      共有数据<span>{{ donateList.length }}</span
      >条
    </div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>捐赠人</th>
          <th>受捐单位</th>
          <th>金额</th>
          <th>受捐日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in donateList" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.uname }}</td>
          <td>{{ item.danwei }}</td>
          <td>{{ item.money }}</td>
          <td>{{ item.date }}</td>
          <td>
            <a @click="removeDonate(item.id)">删除</a> &nbsp;
            <a>修改</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
// 初始数组
let donateList = reactive([
  {
    id: 1,
    uname: "何玉婷",
    danwei: "厚朴公司",
    money: 100,
    date: "2022-01-01",
  },
  {
    id: 2,
    uname: "钊钊",
    danwei: "翻斗花园",
    money: 200,
    date: "2022-01-01",
  },
]);
const originalList = ref([...donateList]); // 保存原始列表
const uname = ref("");
const danwei = ref("");
const money = ref(0);
const date = ref("");
// 保证每个id不一样
let nextId = ref(donateList.length + 1);
let donateComporment = ref("厚朴公司"); // 设置初始值

function addDonateList() {
  donateList.push({
    id: nextId.value++,
    uname: uname.value,
    danwei: danwei.value,
    money: money.value,
    date: date.value,
  });
  originalList.value = [...donateList]; // 更新 originalList
}

// 删除
function removeDonate(id) {
  const index = donateList.findIndex((item) => item.id === id);
  if (index !== -1) {
    donateList.splice(index, 1);
    originalList.value = [...donateList]; // 更新 originalList
  }
}

// splice的第三个参数是要添加到数组中的元素
function filtersComporment() {
  donateList.splice(
    0,
    donateList.length,
    ...donateList.filter((item) => item.danwei === donateComporment.value)
  );
}

function resetList() {
  donateList.splice(0, donateList.length, ...originalList.value);
}
</script>

<style>
.form {
  margin: auto;
  background-color: rgb(239, 238, 238);
  border: 1px solid;
  width: 90%;
  height: 50px;
}

.form input {
  height: 20px;
  width: 100px;
}

select {
  height: 24px;
  width: 100px;
}

.num {
  margin: auto;
  background-color: rgb(42, 92, 136);
  width: 90%;
  height: 30px;
  text-align: right;
  line-height: 30px;
  color: rgb(255, 255, 255);
  border: 1px solid;
}

.fromAdd {
  display: flex;
  /* justify-content: space-between; */
}

table {
  border-collapse: collapse;
  width: 90%;
  margin: auto;
  background-color: rgb(191, 222, 239);
}

table th {
  width: 12.5%;
  text-align: center;
  border: 2px solid;
  background-color: rgb(118, 181, 222);
}

table tbody td {
  width: 12.5%;
  text-align: center;
  border: 1px solid;
}

a {
  width: 60px;
  height: 20px;
  text-decoration: none;
  /* background-color: rgb(237, 107, 42); */
  color: rgb(0, 0, 0);
}

a:hover {
  color: rgb(55, 100, 117);
}

button {
  height: 25px;
  width: 70px;
  background-color: rgb(52, 167, 220);
  color: aliceblue;
  border: none;
  margin-left: 20px;
}
</style>
